<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import { useDietStore } from '../stores/diet'
import { useExerciseStore } from '../stores/exercise'
import { useProgressStore } from '../stores/progress'

/**
 * 获取状态管理中的数据
 */
const userStore = useUserStore()
const dietStore = useDietStore()
const exerciseStore = useExerciseStore()
const progressStore = useProgressStore()

/**
 * 获取当前时间段问候语
 * @returns {string} 问候语
 */
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了'
  if (hour < 12) return '早上好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  return '晚上好'
})

/**
 * 今日任务列表
 */
const dailyTasks = computed(() => [
  {
    id: 1,
    title: '记录早餐',
    completed: dietStore.meals.breakfast.length > 0,
    icon: 'fa-coffee'
  },
  {
    id: 2,
    title: '记录午餐',
    completed: dietStore.meals.lunch.length > 0,
    icon: 'fa-utensils'
  },
  {
    id: 3,
    title: '完成30分钟运动',
    completed: exerciseStore.exerciseTime >= 30,
    icon: 'fa-running'
  },
  {
    id: 4,
    title: '喝够8杯水',
    completed: false,
    icon: 'fa-tint'
  },
  {
    id: 5,
    title: '记录体重',
    completed: progressStore.weightLog.some(log => 
      log.date === new Date().toISOString().split('T')[0]),
    icon: 'fa-weight'
  }
])

/**
 * 完成签到
 */
const checkIn = () => {
  progressStore.checkIn()
  // 可以添加签到奖励积分等逻辑
  userStore.addPoints(10)
}

/**
 * 检查今日是否已签到
 */
const isTodayCheckedIn = computed(() => {
  const today = new Date().toISOString().split('T')[0]
  return progressStore.checkInDates.includes(today)
})

/**
 * 推荐食物列表
 */
const recommendedFoods = computed(() => {
  return dietStore.recommendedMeals
})

/**
 * 卡路里摄入进度百分比
 */
const caloriesProgress = computed(() => {
  return Math.round((dietStore.caloriesIntake / dietStore.caloriesTarget) * 100)
})

/**
 * 当前时间
 */
const currentTime = ref(getCurrentTime())

function getCurrentTime() {
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

// 初始加载动画
const isLoading = ref(true)

// 每分钟更新时间
onMounted(() => {
  // 模拟加载数据
  setTimeout(() => {
    isLoading.value = false
  }, 800)
  
  // 更新时间
  setInterval(() => {
    currentTime.value = getCurrentTime()
  }, 60000)
})
</script>

<template>
  <div class="home-page">
    <div v-if="isLoading" class="loading-container">
      <div class="spinner"></div>
      <p>加载中...</p>
    </div>
    
    <template v-else>
      <!-- 页面标题栏 -->
      <div class="page-header">
        <h1 class="app-title">减肥大师</h1>
        <div class="notification-container">
          <button class="notification-btn"><i class="fas fa-bell"></i></button>
          <div class="notification-badge">3</div>
        </div>
      </div>
      
      <!-- 主内容区域 -->
      <div class="content-container">
        <!-- 用户信息 -->
        <div class="user-info-section">
          <div class="welcome-text">
            <div class="welcome-name">{{ greeting }}，{{ userStore.userInfo.name }}</div>
            <div class="welcome-message">
              已连续签到 <span class="highlight-text">{{ progressStore.currentStreak }}</span> 天，继续加油！
            </div>
          </div>
          <div class="avatar-container">
            <img :src="userStore.userInfo.avatar" alt="用户头像" class="user-avatar" />
            <div v-if="!isTodayCheckedIn" class="check-in-badge" @click="checkIn">
              <i class="fas fa-plus"></i>
            </div>
            <div v-else class="checked-badge">
              <i class="fas fa-check"></i>
            </div>
          </div>
        </div>
        
        <!-- 快速操作 -->
        <div class="quick-actions-grid">
          <div class="quick-action-item" @click="$router.push('/food-recognition')">
            <div class="quick-action-icon">
              <i class="fas fa-camera"></i>
            </div>
            <div class="quick-action-name">拍照识别</div>
          </div>
          
          <div class="quick-action-item" @click="$router.push('/diet')">
            <div class="quick-action-icon">
              <i class="fas fa-utensils"></i>
            </div>
            <div class="quick-action-name">记录餐食</div>
          </div>
          
          <div class="quick-action-item" @click="$router.push('/exercise')">
            <div class="quick-action-icon">
              <i class="fas fa-dumbbell"></i>
            </div>
            <div class="quick-action-name">记录运动</div>
          </div>
          
          <div class="quick-action-item" @click="$router.push('/tracking')">
            <div class="quick-action-icon">
              <i class="fas fa-weight"></i>
            </div>
            <div class="quick-action-name">记录体重</div>
          </div>
        </div>
        
        <!-- 今日目标与摘要 -->
        <div class="data-card">
          <div class="card-header">今日目标</div>
          
          <div class="calories-summary">
            <div class="calories-text">
              <div class="calories-numbers">{{ dietStore.caloriesIntake }} / {{ dietStore.caloriesTarget }}</div>
              <div class="calories-label">已摄入卡路里 / 目标</div>
            </div>
            
            <div class="progress-circle">
              <div class="progress-ring" :style="`background: conic-gradient(#22C55E 0% ${caloriesProgress}%, #E5E7EB ${caloriesProgress}% 100%)`"></div>
              <div class="progress-center">{{ caloriesProgress }}%</div>
            </div>
          </div>
          
          <div class="nutrition-summary">
            <div class="nutrition-item">
              <div class="nutrition-value">{{ dietStore.caloriesIntake }}</div>
              <div class="nutrition-label">摄入</div>
            </div>
            
            <div class="nutrition-item">
              <div class="nutrition-value">{{ exerciseStore.caloriesBurned }}</div>
              <div class="nutrition-label">消耗</div>
            </div>
            
            <div class="nutrition-item">
              <div class="nutrition-value">{{ dietStore.nutrition.protein }}g</div>
              <div class="nutrition-label">蛋白质</div>
            </div>
            
            <div class="nutrition-item">
              <div class="nutrition-value">2.5L</div>
              <div class="nutrition-label">饮水</div>
            </div>
          </div>
        </div>
        
        <!-- 食物推荐 -->
        <div class="section-container">
          <div class="section-header">
            <h2 class="section-title">推荐健康餐</h2>
            <a class="view-all-link" @click="$router.push('/diet')">查看全部</a>
          </div>
          
          <div class="scrollable-cards">
            <div 
              v-for="food in recommendedFoods" 
              :key="food.id"
              class="food-card"
            >
              <img :src="food.image" class="food-image" :alt="food.name">
              <div class="food-info">
                <div class="food-name">{{ food.name }}</div>
                <div class="food-calories">{{ food.calories }} 卡路里</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 今日任务 -->
        <div class="data-card">
          <div class="card-header">今日任务</div>
          <div class="tasks-container">
            <div 
              v-for="task in dailyTasks" 
              :key="task.id" 
              class="task-item"
              :class="{ 'task-completed': task.completed }"
            >
              <div class="task-icon">
                <i class="fas" :class="task.icon"></i>
              </div>
              <div class="task-details">
                <span class="task-title">{{ task.title }}</span>
              </div>
              <div class="task-status">
                <i class="fas" :class="task.completed ? 'fa-check-circle' : 'fa-circle'"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 成就卡片 -->
        <div class="data-card achievement-card">
          <div class="achievement-bg">
            <i class="fas fa-medal"></i>
          </div>
          <div class="card-header">本周成就</div>
          <div class="achievement-title">连续签到 {{ progressStore.currentStreak }} 天</div>
          <div class="achievement-description">
            你已经连续记录健康数据 {{ progressStore.currentStreak }} 天，获得 {{ progressStore.currentStreak * 100 }} 积分
          </div>
          <button class="action-button" @click="checkIn" :disabled="isTodayCheckedIn">
            {{ isTodayCheckedIn ? '已领取奖励' : '领取奖励' }}
          </button>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
:root {
  --primary-color: #22C55E;
  --primary-light: #DCFCE7;
  --secondary-color: #16A34A;
  --text-primary: #333333;
  --text-secondary: #6B7280;
  --text-light: #9CA3AF;
  --background-light: #F9FAFB;
  --background-lighter: #F3F4F6;
  --border-color: #f0f0f0;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}

.home-page {
  max-width: 100%;
  margin: 0 auto;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 加载动画 */
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(34, 197, 94, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 页面标题栏 */
.page-header {
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

.app-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

.notification-container {
  position: relative;
}

.notification-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-xs);
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background-color: #EF4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
}

/* 主内容区域 */
.content-container {
  padding: var(--spacing-md);
  max-width: 768px;
  margin: 0 auto;
}

/* 用户信息区域 */
.user-info-section {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.welcome-text {
  flex: 1;
}

.welcome-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.welcome-message {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.highlight-text {
  color: var(--primary-color);
  font-weight: 500;
}

.avatar-container {
  position: relative;
  margin-left: var(--spacing-md);
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: var(--shadow-sm);
}

.check-in-badge,
.checked-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.check-in-badge {
  background-color: var(--primary-color);
}

.checked-badge {
  background-color: #3B82F6;
}

/* 快速操作 */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.quick-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.quick-action-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-md);
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-xs);
  color: var(--primary-color);
  font-size: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-action-item:hover .quick-action-icon {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quick-action-name {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  text-align: center;
}

/* 卡片通用样式 */
.data-card {
  background-color: white;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

/* 卡路里摘要和进度圆环 */
.calories-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.calories-text {
  flex: 1;
}

.calories-numbers {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.calories-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.progress-circle {
  width: 64px;
  height: 64px;
  position: relative;
}

.progress-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(-90deg);
}

.progress-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-sm);
  font-weight: 600;
  background-color: white;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 营养摘要 */
.nutrition-summary {
  display: flex;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-md);
}

.nutrition-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid var(--border-color);
}

.nutrition-item:last-child {
  border-right: none;
}

.nutrition-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.nutrition-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* 推荐食物区 */
.section-container {
  margin-bottom: var(--spacing-lg);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.section-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.view-all-link {
  font-size: var(--font-size-sm);
  color: var(--primary-color);
  text-decoration: none;
  cursor: pointer;
}

.scrollable-cards {
  display: flex;
  overflow-x: auto;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  -webkit-overflow-scrolling: touch; /* 增强iOS滚动体验 */
  scrollbar-width: none; /* Firefox */
}

.scrollable-cards::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.food-card {
  flex: 0 0 140px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background-color: white;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.food-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.food-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.food-info {
  padding: var(--spacing-sm);
}

.food-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.food-calories {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* 任务列表 */
.tasks-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.task-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  background-color: var(--background-light);
  transition: all 0.2s ease;
  cursor: pointer;
}

.task-item:hover {
  background-color: var(--background-lighter);
}

.task-completed {
  background-color: rgba(34, 197, 94, 0.1);
}

.task-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-sm);
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-color);
  margin-right: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.task-details {
  flex: 1;
}

.task-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.task-status {
  color: var(--text-light);
  font-size: var(--font-size-lg);
}

.task-completed .task-status {
  color: var(--primary-color);
}

/* 成就卡片 */
.achievement-card {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-lg);
  text-align: center;
}

.achievement-bg {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 80px;
  color: rgba(34, 197, 94, 0.1);
  transform: translate(10px, -20px);
}

.achievement-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.achievement-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.action-button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-button:hover {
  background-color: var(--secondary-color);
}

.action-button:disabled {
  background-color: var(--text-light);
  cursor: not-allowed;
}

/* 平板布局 */
@media (min-width: 640px) {
  .content-container {
    padding: var(--spacing-lg);
  }
  
  .quick-actions-grid {
    gap: var(--spacing-lg);
  }
  
  .quick-action-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
  
  .task-item {
    padding: var(--spacing-lg);
  }
}

/* 桌面布局 */
@media (min-width: 1024px) {
  .home-page {
    background-color: #f5f5f5;
  }
  
  .content-container {
    padding: var(--spacing-xl);
    max-width: 1024px;
  }
  
  .scrollable-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    overflow: visible;
    gap: var(--spacing-lg);
  }
  
  .food-card {
    flex: 0 0 auto;
    width: 100%;
  }
  
  .food-image {
    height: 120px;
  }
  
  .nutrition-summary {
    padding: var(--spacing-lg) 0;
  }
}
</style> 